<template>
    <div class="time_node">
        <div class="parent_node">
            <div class="spot"></div>
            <div class="left_line"></div>
            <div class="notice_title">
                <slot name="title"></slot>
            </div>
            <div class="notice_content">
                <slot name="content"></slot>
                
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'g-time-node',
    setup(){

    }
}
</script>
<style scoped>
    .parent_node{
        position: relative;
        padding-top: 20px;
        /* padding-left: 20px; */
        padding-bottom: 20px;
    }
    .left_line{
        position: absolute;
        width: 2px;
        top: 0;
        bottom: 0;
        left: -1px;
        background-color: #40a0ff79;
    }
    .spot{
        width: 10px;
        height: 10px;
        background-color: #409EFF;
        border-radius: 50%;
        position: absolute;
        top: -5px;
        left: -5px;
    }
    .notice_title{
        padding-left: 10px;
        height: 20px;
        line-height: 20px;
        position: absolute;
        top: -10px;
        font-weight: 600;
        font-size: 16px;
        width: 100%;
    }
    .notice_content{
        padding-left: 20px;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.5);
    }
</style>